[V0_FILE]typescriptreact:file="components/kokonutui/bento-grid.tsx" import type React from "react" import { cn } from "@/lib/utils" import { Home, MapPin, Compass, Building, Heart, HomeIcon, Camera } from "lucide-react" import Link from "next/link" import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card" interface BentoItem { title: string description: string icon: React.ReactNode status?: string tags?: string[] meta?: string cta?: string colSpan?: number hasPersistentHover?: boolean } interface BentoGridProps { items: BentoItem[] } const itemsSample: BentoItem[] = [ { title: "Luxury Beachfront Villa", meta: "4.9 (128 reviews)", description: "Stunning oceanfront property with private pool, modern amenities, and breathtaking sunset views. Perfect for family getaways.", icon: , status: "Superhost", tags: ["Beachfront", "Pool", "Luxury"], colSpan: 2, hasPersistentHover: true, }, { title: "Downtown Loft", meta: "$199/night", description: "Modern urban living in the heart of the city. Walking distance to restaurants and attractions.", icon: , status: "Instant Book", tags: ["Urban", "Modern"], }, { title: "Popular Areas", description: "Discover trending neighborhoods with the highest guest satisfaction", icon: , status: "New", }, { title: "Bali Villa", description: "A luxurious villa in Bali with a private pool and stunning views of the ocean", icon: , meta: "12 houses", tags: ["Housing", "Tools"], }, { title: "Travel Collections", description: "Curated lists of unique stays and experiences worldwide", icon: , meta: "Updated weekly", tags: ["Featured", "Curated"], }, { title: "Local Guide", meta: "6 cities", description: "Expert recommendations for local attractions and hidden gems", icon: , status: "Featured", tags: ["Local", "Guide"], }, { title: "Exclusive Experiences", meta: "100+ activities", description: "Unique adventures and memorable experiences curated by local experts. From cooking classes to outdoor expeditions.", icon: , status: "Premium", tags: ["Activities", "Local"], colSpan: 2, }, ] export default function BentoGrid({ items = itemsSample }: BentoGridProps) { return (

{items.map((item) => (

{item.icon}

{item.status || "Active"}

{item.title} {item.meta}

{item.description}

{item.tags?.map((tag) => ( #{tag} ))}

{item.cta || "Explore →"}

))}

) }

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This

About

Tags

Share

About

Tags

Share

More from kokonut

More Templates Like This